<template>
	<div class="dashboard-container">
		<el-card style=" margin-bottom: 20px">
			<!-- 给el-form绑定form -->
			<el-form :model="form" :inline="true">
				<el-form-item label="套餐类型">
					<el-select v-model="form.state" placeholder="请选择">
						<el-option label="基础产品" :value="1">
						</el-option>
						<el-option label="收款" :value="2">
						</el-option>
						<el-option label="优惠卷" :value="3">
						</el-option>
						<el-option label="充值购" :value="4">
						</el-option>
						<el-option label="单品快卖" :value="5">
						</el-option>
						<el-option label="商城" :value="6">
						</el-option>
						<el-option label="会员系统" :value="7">
						</el-option>
						<el-option label="股东" :value="8">
						</el-option>
						<el-option label="套餐" :value="9">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="支付方式">
					<el-select v-model="form.typ" placeholder="请选择">
						<el-option label="小程序" :value="1">
						</el-option>
						<el-option label="公众号" :value="2">
						</el-option>
						<el-option label="后台" :value="3">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="日期">
					<el-date-picker @change="dateChange" value-format="timestamp" v-model="dateRange" type="daterange"
						placeholder="请选择" />
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchclick"
					style="margin-left: 12px">筛选</el-button>
				<el-button @click="resetSearch">重置</el-button>
				<!-- <el-button @click="addrenyuan" type="success">添加</el-button> -->
			</el-form>
		</el-card>
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="ID" align="center"> </el-table-column>
			<el-table-column prop="vipname" label="充值名称" align="center">
			</el-table-column>
			<el-table-column prop="name" label="充值描述" align="center">
			</el-table-column>
			<el-table-column prop="phone" label="手机号" align="center">
			</el-table-column>
			<el-table-column prop="uid" label="充值用户id" align="center">
			</el-table-column>
			<el-table-column prop="typ" label="支付方式" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.typ==1">小程序</span>
					<span v-if="scope.row.typ==2">公众号</span>
					<span v-if="scope.row.typ==3">后台</span>
				</template>
			</el-table-column>
			<el-table-column prop="state" label="套餐类型" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.state==1">基础产品</span>
					<span v-if="scope.row.state==2">收款</span>
					<span v-if="scope.row.state==3">优惠卷</span>
					<span v-if="scope.row.state==4">充值购</span>
					<span v-if="scope.row.state==5">单品快卖</span>
					<span v-if="scope.row.state==6">商城</span>
					<span v-if="scope.row.state==7">会员系统</span>
					<span v-if="scope.row.state==8">股东</span>
					<span v-if="scope.row.state==9">套餐</span>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="充值金额" align="center">
			</el-table-column>
			<el-table-column width="190" prop="paytime" label="充值日期" align="center">
				<template slot-scope="scope">
					{{ scope.row.paytime | datefilter }}
				</template>
			</el-table-column>
			<!-- <el-table-column label="是否启用" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.switch"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="change($event, scope.row.id)"
          >
          </el-switch>
        </template>
      </el-table-column> -->
			<!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">

          <el-button type="success" @click="shenheshenhe(scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column> -->
		</el-table>
		<!-- <Pagination :currentPage="form.pageNo" :page-size="form.pageSize" :total="total" @changelimit="changelimit"
      @changecurrentPage="changecurrentPage" :page-count='totalPage'></Pagination> -->
		<el-pagination  @current-change="changecurrentPage"
			:current-page="form.pageNo"  :page-size="form.pageSize"
			layout="total, prev, pager, next, jumper" :total="total">
		</el-pagination>



		<add ref="add" @refresh="refresh"></add>
	</div>
</template>

<script>
	import {
		vipOrderListApi
	} from "@/api/vippackage";
	import add from "./modules/add";
	export default {
		name: "Dashboard",
		components: {
			add,
		},
		data() {
			return {
				dateRange: [],
				form: {
					pageNo: 1,
					pageSize: 10,
					state: '',
					inttime: '',
					endtime: '',
					typ: ''
				},
				total: 0,
				tableData: [],
				totalPage: ''
			};
		},
		filters: {
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT = Year + "-" + Moth + "-" + Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		methods: {
			dateChange(e) {
				this.form.inttime = e[0]
				this.form.endtime = e[1]
			},
			async getcouponlist1() {
				let param = {
					pageNo: this.form.pageNo,
					pageSize: this.form.pageSize,
					state: this.form.state == '' ? 0 : this.form.state,
					inttime: this.form.inttime == '' ? 0 : this.form.inttime,
					endtime: this.form.endtime == '' ? 0 : this.form.endtime,
					typ: this.form.typ == '' ? 0 : this.form.typ,
				};
				let result = await vipOrderListApi(param);
				if (result.code == 0) {
					if (result.data.data != []) {
						this.tableData = result.data.data;
						this.totalPage = result.data.totalPage;
						console.log('result.data.totalPage', result.data.totalPage)
						this.total = result.data.totalCount;
					}
				}
			},
			async change(e, id) {
				let data = {
					id: Number(id),
					status: e ? 1 : 2,
				};
				console.log(data);
				let result = await sxjcouponsxj(data);
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "状态修改成功",
						type: "success",
					});
				}
				console.log(result);
				this.getcouponlist1();
			},
			searchclick() {
				this.getcouponlist1();
			},
			resetSearch() {
				(this.form = {
					pageNo: 1,
					pageSize: 5,
					state: '',
					inttime: 0,
					endtime: 0,
					typ: ''
				}),
				this.getcouponlist1();
			},
			addrenyuan() {
				this.$refs.add.add();
			},
			// 子传父:自定义事件
			refresh() {
				this.getcouponlist1();
			},

			changelimit(val) {
				this.form.pageSize = val;
				this.getcouponlist1();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getcouponlist1();
			},
			changerenyuan(val) {
				this.$refs.add.edit(val);
			},
			async shenheshenhe(val) {
				let result = await shenhemastersh({
					id: val.id
				});
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "审核成功",
						type: "success",
					});
					this.getcouponlist1();
				}
			},
		},
		watch: {
			"form.phone": {
				handler(newVal) {
					if (newVal == "") {
						this.getcouponlist1();
					}
				},
			},
		},
		mounted() {
			this.getcouponlist1();
		},
	};
</script>

<style lang="scss" scoped>
	.dashboard {
		&-container {
			margin: 30px;
		}

		&-text {
			font-size: 30px;
			line-height: 46px;
		}
	}
</style>